<template>
    <mi-list-page>

        <mi-table :list="list" max-height="calc(100vh - 210px)">
            <template #topBar>

                <div class="d_flex flex_jc_sb">
                    <div></div>

                    <mi-search-page :search="search" placeholder="用户/ID" />

                </div>

            </template>


            <template #user="{row}">
                <el-space class="f12" direction="vertical" alignment="start">
                    <div>{{ row.user?.nickname }}</div>
                </el-space>
            </template>



            <template #audit="{row}">
                <el-tag type="warning" v-if="row.audit == 0">未审核</el-tag>
                <el-tag type="success" v-else-if="row.audit == 1">已通过</el-tag>
                <div v-else-if="row.audit == -1">
                    <el-tag type="info" >已拒绝</el-tag>
                    <div>{{row.audit_note}}</div>
                </div>
            </template>


            <template #toolbar="{row}">
                <el-space wrap>
                    <el-button link type="primary"
                               v-if="row.audit == 0"
                               @click="lineToolbarEvent('audit', row)" v-auth="auth.edit">审核</el-button>
                </el-space>
            </template>

        </mi-table>

    </mi-list-page>


    <dist-cash-apply-audit />

</template>

<script setup lang="ts">
// toolbar 事件
import {provide, reactive, ref} from "vue";
import {makeModelAuth} from "@/utils/auth";
import global from "@/dict/global";
import List from "@/model/list";
import Edit from "@/model/edit";
import {FormInstance} from "element-plus";
import Search from "@/model/search";
import DistCashApplyAudit from "@/views/distrib/distCashApplyAudit.vue";

const tdWidth = global.tdWidth
const auth = makeModelAuth('distCashApply')

const lineToolbarEvent = (event:string, row:any) => {
    switch (event) {
        case 'audit':
            list.currentRow = row
            audit.show = true
            break
    }
}

const list = reactive(new List({
    where:{delete: 'normal'},
    url: `/${auth.index}`,
    columns:[
        {name: "select", type:'selection'},
        {name: "id", title:'ID', width:tdWidth.id},
        {name: "user_id", title:'用户ID'},
        {name: "user", title:'用户', minWidth: tdWidth.min, type:'slot', slot:'user'},
        {name:'amount', title: '提现金额'},
        {name: "audit", title:'审核状态', type:'slot', slot:'audit'},
        {name: "create_time", title:'申请时间'},
        {title: "操作", type:'slot', slot:'toolbar'},
    ]
}))

const audit = reactive(new Edit({}))

const searchRef = ref<FormInstance>()
const search = reactive(new Search({
    list: list,
    searchRef:searchRef.value
}))

const detail = reactive({
    show: false,
})

provide("list", list)
provide("audit", audit)

</script>

<style scoped>
.list_label{
    width: 5em;
    display: inline-block;
    text-align: right;
}
</style>
